<template>
  <div class="course-management">
    <div class="classTop">
      <span class="tabName">PDF解析demo</span>
      <div class="border"></div>
    </div>
    <el-dialog :title="formTitle" v-model="dialogVisible" width="40%">
      <el-upload ref="upload" class="uploadPdf" action="http://localhost:8080/api/pdf/resolve" :limit="1"
        :on-exceed="handleExceed" :on-success="handleSuccess" :auto-upload="false">
        <template #trigger>
          <el-button type="primary">select file</el-button>
        </template>
        <el-button class="ml-3" type="success" @click="submitUpload">
          upload to server
        </el-button>
        <template #tip>
          <div class="el-upload__tip text-red">
            limit 1 file, new file will cover the old file
          </div>
        </template>
      </el-upload>
    </el-dialog>
    <el-dialog v-model="dialogVisible3" title="提示">
      <span>知识点已生成，请自行查看。</span>
      <template #footer>
        <el-button @click="dialogVisible3 = false">确定</el-button>
      </template>
    </el-dialog>
    <div class="manage-header">
      <!-- 添加按钮 -->
      <el-button type="primary" @click="dialogVisible = true" class="add-course">+ 上传文件</el-button>
      <!-- 搜索按钮 -->
      <el-button type="primary" @click="dialogVisible2 = true" class="add-course">查看生成知识点</el-button>
    </div>
    <div class="pdf-content" v-loading="!diglogContentVisible && isSubmit" element-loading-text="加载中，请稍等...">
      <el-collapse v-model="activeName">
        <el-checkbox-group v-model="checkList">
          <el-collapse-item v-for="item in ContentList" :key="item.name" :title="item.name" :name="item.name">
            <div class="sectionItem" v-for="sectionItem in item.sections">
              <el-checkbox v-if="item.sections && item.sections[0]" :label="sectionItem.sectionName"
                @change="handleCheckboxChange(item, sectionItem)" :value="sectionItem.content" />
              <div>
                {{
                  item.sections && item.sections[0] ? sectionItem.content : "--"
                }}
              </div>
            </div>
          </el-collapse-item>
        </el-checkbox-group>
      </el-collapse>
    </div>
    <!-- <el-empty :image-size="200" v-if="ContentList.length == 0"/> -->
    <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->
    <!-- 生成知识点 -->
    <div class="button-bottom">
      <el-button type="primary" @click="handleSend"
        style="width: 10%; margin-top: 3%; margin-bottom: 3%">生成知识点</el-button>
    </div>
  </div>
  <el-dialog v-model="dialogVisible2" title="查看生成的知识点" width="1400" :before-close="handleClose">
    <div style="max-width: 100%; ">
      <div style="min-width: 600px;">
        <!-- Chapter selection -->
        <el-select v-model="selectedChapter" placeholder="选择章节">
          <el-option v-for="chapter in chapterList" :key="chapter" :label="chapter" :value="chapter">
          </el-option>
        </el-select>

        <!-- Sections and knowledge points -->
        <el-collapse v-if="selectedChapter">
          <el-collapse-item v-for="section in getSectionsByChapter(selectedChapter)" :key="section.section"
            :title="section.section">
            <el-checkbox-group v-model="checkedKnowledge">
              <el-checkbox v-for="knowledge in section.knowList" :key="knowledge" :label="knowledge">
                {{ knowledge.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { genFileId } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";
const checkAll = ref(false);
const isIndeterminate = ref(true);
// const checkedKnowledge = ref(['1'])
interface sectionItem {
  sectionName: string;
  content: string;
}
interface ContentList {
  name: string;
  sections: Array<sectionItem>;
}
const ContentList = ref<ContentList[]>([]);
// const ContentList = ref<ContentList[]>([
//       {
//         "name": "前言",
//         "sections": [
//           {
//             "sectionName": "编写目标",
//             "content": "了解不同语言文化对于促进文化多样性、培养学习者全球视野具有重要作用。国际中文教育是世界语言文化交流的重要组成部分，在加深人民相互理解、促进文明交流互鉴方面具有不可替代的作用。作为中文母语国，我们有责任、有义务为全球学习者提供了解真实、立体、全面中国的渠道和途径，积极响应并主动实践联合国教科文组织《世界文化多样性宣言》，为丰富世界文化做出积极贡献。为此，教育部中外语言交流合作中心（以下简称“语合中心”）研制了《国际中文教育用中国文化和国情教学参考框架》（以下简称“参考框架”），对中国文化和当代国情的教学内容和目标进行梳理和描述，旨在为海内外大中小学、孔子学院（课堂）和其他中文教学机构在文化课程设置、课堂教学、教材编写、学习者文化能力测评等方面提供参考和依据。"
//           }
//         ]
//       },
//       {
//         "name": "编写原则",
//         "sections": [
//           {
//             "sectionName": "科学性原则",
//             "content": "《参考框架》采用了文化即生活的宽泛文化定义。以文化人类学、跨文化交际学、文化传播学、第二语言习得和教学法为理论依据，参考了国内外外语学习标准和教学参考框架，吸收了国际中文教育领域文化教学研究的成果，广泛调研了海外孔子学院（课堂）和大中小学中国文化教学的实践和案例，在此基础上制订的文化教学参考框架具有坚实的理论基础和实证依据。"
//           },
//           {
//             "sectionName": "系统性原则",
//             "content": "《参考框架》是对中国文化和国情教学内容和目标的梳理和描述。文化教学内容涵盖了文化的产物、制度、行为、观念的维度，既包括了中国传统文化的成就和贡献，也包括了中国当代的国情信息，还包括了中国社会和百姓生活的内容，力图从历时和共时的维度、从国家和个体的视角展现立体、真实、全面的中国。"
//           },
//           {
//             "sectionName": "针对性原则",
//             "content": "培养跨文化交际能力和体现“结构一功能一文化”的结合是国际中文教育的突出特点。《参考框架》充分考虑了国际中文教育领域文化教学的独特性，选择的文化项目和文化点有针对性地增加了与中文学习和跨文化交际密切相关的文化因素，如语言交际、非语言交际、交往习俗、语言中的文化等，有助于学习者理解语言与文化之间的关系，提高语言交际能力和跨文化意识。"
//           },
//           {
//             "sectionName": "实用性原则",
//             "content": "《参考框架》提供中国文化国情教学的总体框架和文化项目，根据学习者认知特点划分为初级（小学）、中级（中学）、高级（大学及成人）三个层级，提高了文化教学的实用性和可操作性。在每个层级选择了适应学习者特点和教学特点的文化项目，列举了文化点，描述了具体的教学目标和内容，体现了文化教学由浅入深、由具体到抽象、由零散到系统循环往复、螺旋上升的特点。"
//           }
//         ]
//       },
//       {
//         "name": "内容和目标",
//         "sections": [
//           {
//             "sectionName": "结构设计",
//             "content": "《参考框架》包括3个一级文化项目，32个二级文化项目，既考虑了文化教学内容的系统性和完整性，又突出了中国文化和国情的独特性，古今兼顾、立足当代，强调传统文化与当代社会之间的继承和发扬的关系。列举文化点的设计既强调中国文化的典型特点，也体现了文化教学内容的动态性和开放性，便于教师根据文化内容的变化和教学的需要灵活增减和取舍文化教学点。"
//           },
//           {
//             "sectionName": "教学目标",
//             "content": "《参考框架》的教学目标分为总目标和分级目标。\n1．总目标\n总目标包括文化知识、文化理解、跨文化意识、文化态度四个维度。\n（1）文化知识：了解中国传统文化、当代中国、社会与生活的概况和主要特点。\n（2）文化理解：\n理解中国文化的多样性和动态性；\n理解传统文化与当代社会生活的联系，理解文化产物、制度、行为所体现的中国文化内涵和观念。\n（3）跨文化意识：\n理解中国文化与学习者本国文化的异同；\n培养对中外文化异同的敏感性。\n（4）文化态度：\n以尊重、宽容、共情的态度看待和评价中国文化的特点和文化间的差异；\n超越刻板印象和文化偏见。"
//           }
//         ]
//       },
//       {
//         "name": "使用说明",
//         "sections": [
//           {
//             "sectionName": "教学对象",
//             "content": "《参考框架》旨在为海内外大中小学、孔子学院（课堂）和其他语言文化教学机构的教师提供中国文化和中国国情教学的指南。《参考框架》的文化项目和文化点既可以作为语言教学的主题或话题融入中文课堂教学中，也可以作为单独的文化课程、文化讲座、文化活动的内容用学习者的母语来讲授或讨论。教师可根据学习者的需求和知识背景选择合适的教学内容和教学方式。"
//           },
//           {
//             "sectionName": "教学内容的建议",
//             "content": "《参考框架》中的社会生活、传统文化、当代中国三个板块的文化项目相对独立并相互联系。在教学内容方面应遵循古今兼顾、立足当代的原则，强调中国文化和国情的多元性和动态性，强调传统文化对中国社会与生活的影响和当代意义，深入挖掘文化产物、制度、习俗等可见文化现象背后的文化内涵和观念，把握中国文化的本质特征。此外，培养跨文化意识是《参考框架》确定的教学目标之一，由于篇幅的限制和教学对象的多样性，《参考框架》无法列出中外文化异同点和跨文化交际的项目，但是中外文化的联结、比较和互动始终是中国文化和国情教学内容的重要维度。"
//           },
//           {
//             "sectionName": "教学方法的建议",
//             "content": "《参考框架》是对中国文化国情教学的内容和目标的描述，没有列出相应的文化教学资源和教学方法。与《参考框架》配套的文化教学指南或文化教学案例将为教师的文化教学实践提供具体的指导。在教学方法方面，建议讲授式教学方法与体验型学习模式相结合，以利于培养学习者对文化知识、技能、意识、态度的综合能力。教师可根据特定的文化内容和目标选择讲解、讨论、文化体验、艺术欣赏、跨文化比较、情景对话、角色扮演、数据和案例分析、问卷调查、采访与观察等教学活动。此外，教学方式应与学习者的认知水平和年龄特点相适应，恰当选择体验型、分析型、思辨型、独立学习等教学活动，力求达到文化教学的最佳效果。"
//           }
//         ]
//       },
//       {
//         "name": "研发过程",
//         "sections": [
//           {
//             "sectionName": "研发过程",
//             "content": "为满足海内外学习者了解中国和中国文化的需求，教育部中外语言交流合作中心策划了《中国文化国情教学参考框架》项目。本项目是一项重大课题合作攻关的成果，是集体智慧的结晶。感谢首席专家祖晓梅教授团队和华语教学出版社、北京市鼎石学校开发团队对《参考框架》研制做出的重要贡献。也感谢为本书审定、把关的专家顾问团队，他们是北京语言大学崔永华教授、北京大学张英教授、北京语言大学周小兵教授、华东师范大学吴勇毅教授、复旦大学吴中伟教授、北京师范大学王学松教授、加拿大兰加拉学院程龙教授。本项目研制过程中还收到了中外学者、教师和学习者的积极反馈和建议。这一切都为《参考框架》的顺利完成和质量保证奠定了基础，在这里一并表示诚挚的感谢。"
//           }
//         ]
//       }
//     ]);
const activeName = ref("1");
const checkList = ref<any>([]);
const dialogVisible = ref(false);
const diglogContentVisible = ref(false);
const dialogVisible2 = ref(false);
const dialogVisible3 = ref(false);

const formTitle = ref("添加课程");
const upload = ref<UploadInstance>();
const isSubmit = ref(false);
const handleExceed: UploadProps["onExceed"] = (files) => {
  upload.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
};
const handleSuccess = (res: any) => {
  console.log(res);
  //   console.log(res.data[0][0])
  // console.log(res.data[0][0].chapters[0].name);
  for (let i = 0; i < res.data[0].length; i++) {
    for (let j = 0; j < res.data[0][i].chapters.length; j++) {
      ContentList.value.push(res.data[0][i].chapters[j])
    }

  }
  // ContentList.value = res.data[0][0].chapters;
  selectContent.value = [];
  checkList.value = [];
  console.log(ContentList.value);
  diglogContentVisible.value = true;
};
const submitUpload = () => {
  upload.value!.submit();
  dialogVisible.value = false;
  isSubmit.value = true;
  diglogContentVisible.value = false;
};

const handleClose = () => {
  dialogVisible.value = false;
  dialogVisible2.value = false;
};

const getList = async (sendData: any) => {
  // 获取课程列表逻辑
  const data = sendData;
  let result: any = [];
  try {
    const response = await fetch(
      "http://localhost:8080/api/file/pdf/processContents",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      }
    );
    result = await response.json();
    console.log(result);
  } catch (error) {
    console.error("Error:", error);
  }
  return result;
};

const selectContent = ref<any>([]);
const resultList = ref<any>([]);
const showContent = ref<any>({});
const handleSend = async () => {
  // 显示“知识点生成中，请耐心等待完成提示。”
  ElMessage({
    message: '知识点生成中，请耐心等待完成提示。',
    type: 'info',
    duration: 2000 // 消息显示的持续时间（毫秒）
  });

  console.log(checkList.value);
  console.log(selectContent.value);
  const sendData = { contents: checkList.value };
  let result = await getList(sendData);
  console.log(result);
  resultList.value = result.data;
  for (let i = 0; i < selectContent.value.length; i++) {
    selectContent.value[i].knowList = resultList.value[i];
  }
  console.log(selectContent.value);

  // 按chapter分组
  showContent.value = selectContent.value.reduce((acc: any, item: any) => {
    if (!acc[item.chapter]) {
      acc[item.chapter] = [];
    }
    acc[item.chapter].push(item);
    return acc;
  }, {});

  console.log(showContent.value);
  chapterList.value = Object.keys(showContent.value);
  console.log(chapterList.value);

  // 显示“知识点已成功生成，请自行查看”
  ElMessage({
    message: '知识点已成功生成，请自行查看。',
    type: 'success',
    duration: 2000 // 消息显示的持续时间（毫秒）
  });
  dialogVisible3.value = true;
};
const chapterList = ref(Object.keys(showContent.value)); // Assuming showContent is already populated
const selectedChapter = ref(null);
const checkedKnowledge = ref([]);
const getSectionsByChapter = (chapter: any) => {
  return showContent.value[chapter] || [];
};

const handleConfirm = () => {
  console.log(checkedKnowledge.value);
  dialogVisible2.value = false;
};
const handleCheckboxChange = (item: any, sectionItem: any) => {
  let selectedContent = {
    chapter: item.name,
    section: sectionItem.sectionName,
    content: sectionItem.content,
    knowList: [],
  };
  if (!checkList.value.includes(sectionItem.content)) {
    selectContent.value = selectContent.value.filter(
      (content: any) =>
        content.chapter !== item.name ||
        content.section !== sectionItem.sectionName ||
        content.content !== sectionItem.content
    );
  } else {
    selectContent.value.push(selectedContent);
  }
};

</script>

<style scoped>
.course-management {
  height: 100%;
  display: flex;
  flex-direction: column;

  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px;
  }

  .classTop {
    display: flex;
    flex-direction: column;
    height: 10.9%;
    /* justify-content: center; */
    border-bottom: 1px solid #f2f2f2;
    margin-left: 70px;
    margin-top: 13px;
    margin-bottom: 15px;

    .tabName {
      display: flex;
      font-size: 18px;
      margin-top: 15px;
      margin-bottom: 4px;
    }

    .border {
      width: 31px;
      height: 4px;
      display: flex;
      background-color: #3b90ff;
      margin-left: 20px;
      border-radius: 10%;
      margin-top: 17px;
    }
  }
}

.button-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
}

.add-course {
  margin-left: 2%;
  height: 40px;
}

.demo-form-inline {
  margin-top: 1%;
}

.form-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;

  label {
    width: 80px;
    font-weight: bold;
  }

  input,
  textarea {
    flex: 1;
    padding: 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: border-color 0.3s;
    font-size: 14px;
    font-family: inherit;
  }

  input:focus,
  textarea:focus {
    border-color: #409eff;
    outline: none;
  }

  textarea {
    resize: vertical;
  }
}

.custom-input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  background-color: #fff;
  background-image: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-family: inherit;
}

.custom-input:focus {
  border-color: #409eff;
  outline: none;
}

.custom-textarea {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  background-color: #fff;
  background-image: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-family: inherit;
}

.custom-textarea:focus {
  border-color: #409eff;
  outline: none;
  resize: vertical;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.pdf-content {
  width: calc(100% - 80px);
  height: 100%;
  margin: 20px 40px 0;
  overflow: auto;

  .el-collapse-item__content {
    display: flex;
    flex-direction: row;
    color: var(--el-collapse-content-text-color);
    font-size: var(--el-collapse-content-font-size);
    line-height: 1.7692307692;
    padding-bottom: 25px;
    justify-content: space-between;
    margin-right: 50px;
  }
}

.el-pagination {
  margin: 20px 0;
  justify-content: center;
}
</style>
